import { defineComponent, ref } from 'vue'
import {
  NLayout,
  NLayoutContent,
  NLayoutFooter,
  NLayoutSider,
  NRadioButton,
  NRadioGroup,
  NSpace
} from 'naive-ui'
import styles from './index.module.scss'
import VersionManage from './assist-tools-sider/version-manage'
import DbTableInfo from './assist-tools-sider/db-table-info'
import ResourceManage from './assist-tools-sider/resource-manage'
import UDFManage from './assist-tools-sider/udf-manage'
import TmpExecRecordFooter from './tmp-exec-record-footer'
import DataSyncTaskContent from './task-content/data-sync-task-content'
import {
  findLastTaskLogIdReq,
  findTaskDefinedLogReq
} from '@/service/modules/task-manage'

const TaskDetailTab = defineComponent({
  name: 'TaskDetailTab',
  props: {
    taskDefinedId: {
      type: Number,
      required: true
    }
  },
  setup() {
    const collapsed = ref(true)
    const assistToolSelect = ref('versionManage')
    const locationRef = ref(true)
    const currentTaskLogId = ref(0)
    const currentTaskLog = ref(null)
    return {
      collapsed,
      assistToolSelect,
      locationRef,
      currentTaskLogId,
      currentTaskLog
    }
  },
  watch: {
    currentTaskLogId() {
      this.getTaskDefinedLog()
    }
  },
  mounted() {
    this.getLastTaskLogId()
  },
  methods: {
    //切换作业版本
    switchVersion(taskLogId: number) {
      this.currentTaskLogId = taskLogId
    },
    //获取作业最新版本号
    async getLastTaskLogId() {
      const res = await findLastTaskLogIdReq({
        taskDefinedId: this.taskDefinedId
      })
      if (res.resp_code === 0) {
        this.currentTaskLogId = res.data
      }
    },
    //获取当前版本的作业明细
    async getTaskDefinedLog() {
      const res = await findTaskDefinedLogReq({
        taskDefinedLogId: this.currentTaskLogId
      })
      if (res.resp_code === 0) {
        this.currentTaskLog = res.data
      }
    }
  },
  render() {
    return (
      <NLayout style='height: 100%' hasSider>
        <NLayoutSider
          class={styles.tools_nav}
          bordered
          width='35'
          native-scrollbar={false}
        >
          <NRadioGroup
            class={styles.tools_nav_radio}
            v-model:value={this.assistToolSelect}
            onClick={() => (this.collapsed = false)}
          >
            <NRadioButton
              value='versionManage'
              label={window.$t('taskManage.versionManage')}
            />
            <NRadioButton
              value='dbTableInfo'
              label={window.$t('taskManage.dbTableInfo')}
            />
            <NRadioButton
              value='resourceManage'
              label={window.$t('taskManage.resourceManage')}
            />
            <NRadioButton
              value='funcManage'
              label={window.$t('taskManage.funcManage')}
            />
          </NRadioGroup>
        </NLayoutSider>
        <NLayout hasSider>
          <NLayoutSider
            class={styles.tools_contents}
            bordered
            collapse-mode='width'
            collapsed-width={0}
            width='360'
            collapsed={this.collapsed}
            onCollapse={() => {
              this.collapsed = true
            }}
            onExpand={() => {
              this.collapsed = false
            }}
            show-trigger
            native-scrollbar={false}
          >
            <div v-show={this.assistToolSelect === 'versionManage'}>
              <VersionManage
                taskDefinedId={this.taskDefinedId}
                currentTaskLogId={this.currentTaskLog?.id}
                onSwitchVersion={this.switchVersion}
              />
            </div>
            <div v-show={this.assistToolSelect === 'dbTableInfo'}>
              <DbTableInfo />
            </div>
            <div v-show={this.assistToolSelect === 'resourceManage'}>
              <ResourceManage />
            </div>
            <div v-show={this.assistToolSelect === 'funcManage'}>
              <UDFManage />
            </div>
          </NLayoutSider>
          <NLayout>
            <NLayoutContent
              style='height:calc(100% - 30px)'
              native-scrollbar={false}
            >
              <DataSyncTaskContent taskLog={this.currentTaskLog} />
            </NLayoutContent>
            <a
              class={styles.tmpExecRecordHeader}
              id='tmpExecRecordHeader'
              onClick={() => {
                this.locationRef = !this.locationRef
              }}
              href={
                this.locationRef ? '#taskContentHeader' : '#tmpExecRecordHeader'
              }
            >
              <NSpace justify='center'>
                <span>{window.$t('taskManage.tmpExecRecord')}</span>
              </NSpace>
            </a>
            <NLayoutFooter>
              <TmpExecRecordFooter taskDefinedId={this.taskDefinedId} />
            </NLayoutFooter>
          </NLayout>
        </NLayout>
      </NLayout>
    )
  }
})

export default TaskDetailTab
